import type {
  OperationRecordPropsType,
  OperationRecordStateType,
  OperationRecordType
} from './typings'
import { defineComponent, reactive, onMounted } from 'vue'
import { useStore } from 'vuex'
import {
  ElRow,
  ElCol,
  ElTimeline,
  ElTimelineItem,
  ElCard,
  ElDescriptions,
  ElDescriptionsItem,
  ElSpace,
  ElLink,
  ElImage
} from 'element-plus'
import SaasTitle from '~/components/SaasTitle'
import ProcessRecord from './public/ProcessRecord'
import { GUTTER } from '~/utils/const'
import styles from '../../index.module.scss'

export default defineComponent({
  name: 'OperationRecord',
  props: ['detail', 'processRecordList'],
  setup(props: OperationRecordPropsType, { expose }) {
    const store = useStore()
    const state = reactive<OperationRecordStateType>({
      operationRecordList: []
    })

    // 获取操作记录信息
    const handleGetOperationRecordListByOrderId = async () => {
      const { detail } = props
      if (!detail?.id) return
      const res = await store.dispatch('order/GetOperationRecordLisByOrderId', {
        BusinessKey: detail?.id
      })
      state.operationRecordList =
        res?.data?.map((item: OperationRecordType) => ({
          ...item,
          opertionContentList: JSON.parse(item?.opertionContent) || []
        })) || []
    }

    // 初始化时请求数据
    onMounted(() => {
      handleGetOperationRecordListByOrderId()
    })
    expose({ searchOperationRecordList: handleGetOperationRecordListByOrderId })
    return () => (
      <ElRow justify="space-between" gutter={GUTTER}>
        <ElCol span={10}>
          <SaasTitle type="primary">
            <ElLink underline={false} class={styles['order-title']}>
              操作记录
            </ElLink>
          </SaasTitle>
          <br />
          <ElTimeline class={styles['process-time-line']}>
            {state.operationRecordList?.map((item, index) => (
              <ElTimelineItem
                size="large"
                key={item?.id}
                timestamp={item.updateTime}
                type={(index === 0 && 'primary') || undefined}
              >
                <ElDescriptions column={1}>
                  <ElDescriptionsItem
                    v-slots={{
                      label: () => <b>{item.opertionName}</b>
                    }}
                  />
                </ElDescriptions>
                <ElCard shadow="never">
                  <ElDescriptions class="time-line-descriptions" column={1}>
                    <ElDescriptionsItem label={item.opertionUserName} labelAlign="right" />
                    {item?.opertionContentList?.map?.((opertionItem) => (
                      <ElDescriptionsItem
                        key={opertionItem?.key}
                        label={opertionItem?.key || opertionItem?.value}
                        labelAlign="right"
                      >
                        {opertionItem.type !== 'image' ? (
                          opertionItem?.key ? (
                            opertionItem?.value
                          ) : (
                            ''
                          )
                        ) : (
                          <ElSpace wrap>
                            {opertionItem?.value?.split(',')?.map?.((imgUrl, imgUrlIndex, arr) => (
                              <ElImage
                                class={styles['order-el-image']}
                                src={imgUrl}
                                previewSrcList={arr}
                                initialIndex={imgUrlIndex}
                                fit="cover"
                              />
                            ))}
                          </ElSpace>
                        )}
                      </ElDescriptionsItem>
                    ))}
                  </ElDescriptions>
                </ElCard>
              </ElTimelineItem>
            ))}
          </ElTimeline>
        </ElCol>
        <ElCol span={10} offset={4}>
          <SaasTitle type="primary">
            <ElLink underline={false} class={styles['order-title']}>
              流程记录
            </ElLink>
          </SaasTitle>
          <br />
          <ProcessRecord processRecordList={props.processRecordList} />
        </ElCol>
      </ElRow>
    )
  }
})
